<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>八月冰Cake甜品店</title>
    <link th:href="@{/user/css/style.css}" rel="stylesheet">
    <link th:href="@{/user/css/card.css}" rel="stylesheet">
    <link th:href="@{/user/css/user.css}" rel="stylesheet">

</head>
<body>
<!-- 顶部导航 -->
<header class="user-header">
    <nav class="nav-container">
        <div class="nav-left">
            <div class="logo">八月冰Cake</div>
            <div class="nav-links">
                <a href="/user/index" class="nav-active">首页</a>
                <!--            <a href="/user/menu">甜品菜单</a>-->
                <!--            <a href="/user/cart">购物车</a>-->
            </div>
        </div>
        <div class="nav-right">
            <div class="search-bar">
                <input type="text" class="search-input" placeholder="搜索甜品...">
                <button class="search-btn">搜索</button>
            </div>

            <div class="user-info" onmouseover="showUserMenu()" onmouseout="hideUserMenu()">
                <img th:src="'/images/banners/1.png'" class="user-avatar">
                <span class="username">马悦</span>
                <div class="user-menu">
                    <div class="menu-item" onclick="showOrderDrawer()">我的订单</div>
<!--                    <div class="menu-item" onclick="showResetPwdModal()">重置密码</div>-->
                    <div class="menu-item" onclick="logout()">退出登录</div>
                </div>
            </div>
        </div>
    </nav>
</header>

<!-- 轮播图 -->
<div class="carousel">
    <div class="slide active">
        <img src="/images/banners/1.png" alt="生日蛋糕">
    </div>
    <div class="slide">
        <img src="/images/banners/2.png" alt="冰淇淋">
    </div>
    <div class="slide">
        <img src="/images/banners/3.png" alt="法式甜点">
    </div>
</div>

<!-- 商品分类 -->
<section class="categories">
    <h2 class="section-title">甜品分类</h2>
    <div class="category-grid"></div>
</section>

<!-- 商品展示 -->
<section class="products">
    <h2 class="section-title">人气推荐</h2>
    <div class="product-grid"></div>
</section>


<section class="setMeals">
    <h2 class="section-title">人气套餐</h2>
    <div class="setmeal-grid"></div>
</section>

<!-- 固定在右下角的购物车图标 -->
<div class="cart-icon" onclick="toggleCart()">
    🛒
    <span class="cart-badge" id="cartCount">0</span>
</div>

<!-- 购物车弹窗 -->
<div class="cart-modal">
    <div class="cart-header">
        <h3>我的购物车</h3>
        <span class="close-btn" onclick="toggleCart()">&times;</span>
    </div>
    <div class="cart-items" id="cartItems"></div>
    <div class="cart-footer">
        <div class="total-price">总价：¥ <span id="totalAmount">0.00</span></div>
        <button class="checkout-btn" onclick="handleCheckout()">立即支付</button>
    </div>
</div>

<!-- 订单抽屉 -->
<div class="order-drawer">
    <div class="order-header">
        <h3>我的订单</h3>
        <span class="close-btn" onclick="closeOrderDrawer()">&times;</span>
    </div>
    <div class="order-list"></div>
</div>

<!-- 在body末尾添加 -->
<div class="overlay" id="orderOverlay" onclick="closeOrderDrawer()"></div>
<!-- 页脚 -->
<footer class="footer">
    <div class="footer-content">
        <div class="footer-section">
            <h3>联系我们</h3>
            <p>400-888-8888</p>
            <p>service@augustice.com</p>
        </div>
        <div class="footer-section">
            <h3>门店地址</h3>
            <p>上海市甜品大道88号</p>
        </div>
    </div>
    <div class="copyright">© 2023 八月冰Cake</div>
</footer>

<!-- 全局脚本 -->
<script th:src="@{/user/js/app.js}"></script>
<script th:src="@{/user/js/card.js}"></script>
<script th:src="@{/user/js/user.js}"></script>
</body>
</html>